<!--
功能：动态表单
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-01 09:08:17
-->
<template>
  <!-- <a-form
    ref="formRef"
    :label-col="labelCol"
    hideRequiredMark
    :model="formData"
    :rules="formRules"
    layout="horizontal"
    labelAlign="left"
    class="form-container"
  >
    <a-row :gutter="15">
      <<a-col class="gutter-row" :span="24">
        <a-form-item ref="name" label="企业名称" name="name" class="form-container-item">
           <a-input v-model:value="formData.name" />
        </a-form-item>
      </a-col>
      <a-col class="gutter-row" :span="24">
        <a-form-item ref="name" label="企业名称" name="name" class="form-container-item">
           <a-input v-model:value="formData.name" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>  
--></template>

<script setup>
import { reactive } from 'vue'
// 搜索表单配置属性
const formOptions = reactive({
  // 配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效)
  colon: false,
  // 设置表单组件禁用，仅对 antdv 组件有效
  disabled: false,
  // 隐藏所有表单项的必选标记
  hideRequiredMark: true,  
  // label 标签的固定宽度
  labelWidth: '65px',
  // label 标签的文本对齐方式 (只有在属性 layout 为 horizontal 时有效)
  labelAlign: 'left',
  // 布局模式 'horizontal'|'vertical'|'inline'
  layout: 'horizontal',
  // 提交失败自动滚动到第一个错误字段
  scrollToFirstError: false,
  // 表单数据对象需与表单数据配置项的field一致
  model: {
    input: null,
    inputNumber: null,
    select: null,
    datePicker: null
  },
  // 表单验证规则
  rules: {
    input: [{ required: true, message: '表单内容不能为空', trigger: 'blur' }],
    inputNumber: [{ required: true, message: '表单内容不能为空', trigger: 'blur' }]
  },
  // 表单数据配置项
  modelItem: [
    // 文本输入框
    {
      type: 'input', // 表单类型
      field: 'input', // 字段属性key
      title: '文本输入', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请输入文本', // 占位文字
      allowClear: false, // 可以点击清除图标删除内容
      maxlength: null, // 最大输入长度
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      bordered: true // 是否有边框
    },
    // 数字输入框
    {
      type: 'inputNumber', // 表单类型
      field: 'inputNumber', // 字段属性key
      title: '数字输入', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请输入数字', // 占位文字
      max: null, // 最大值
      min: null // 最小值
    },
    // 选择器
    {
      type: 'select', // 表单类型
      field: 'select', // 字段属性key
      title: '选择内容', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请选择内容', // 占位文字
      allowClear: false, // 可以点击清除图标删除内容
      showSearch: true, // 是否可搜索
      dataOptions: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'nanjing', label: '南京' },
        { value: 'hangzhou', label: '杭州' },
        { value: 'kunming', label: '昆明' }
      ], // 数据源选项配置 array<{value, label, [disabled, key, title]}>
      valueField: 'value', // 数据源value键名称
      labelField: 'label', // 数据源label键名称
      mode: null // 设置 Select 的模式为多选或标签 'multiple' | 'tags' | 'combobox'
    },
    // 日期选择
    {
      type: 'datePicker', // 表单类型
      field: 'datePicker', // 字段属性key
      title: '选择日期', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请选择日期', // 占位文字
      mode: 'date', // 日期面板的状态 time | date | month | year | decade
      showTime: false // 增加时间选择功能
    }
  ]
})
</script>
<style lang="scss" scoped>
.form-container {
  // border: 1px solid red;
  &-item {
    // border: 1px solid red;
    margin-bottom: 15px;
  }
}
</style>
